<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="../vue.js"></script>
	<title></title>
</head>

<body>
	<div id="app">
		<comp-one></comp-one>
		<comp-two></comp-two>
	</div>

	<script>

		/*
			注册全局组件，全局注册的组件可以在Vue根实例挂载的标签中使用。
			
			格式：Vue.component(arg1,arg2)
			* arg1 组件的名字。
			* arg2 扩展过的构造器。格式Vue.extend({组件选项对象})。组件实质上就是一个Vue实例，除了el选项外，组件选项对象拥有和Vue实例相同的选项。

			下面是两种写法。
			com-one 传入一个扩展过的构造器，以一个选项对象作为参数
			com-two 直接传入一个选项对象（vue会自动调用Vue.extend）

		*/

		Vue.component('comp-one',Vue.extend({

			data: function (){

				return {
					count : 0,
				}

			},

			template: '<button v-on:click="count++"> you click me {{count}} times </button>',


		}))


		Vue.component('comp-two', {
			data: function () {
				return {
					count: 0,
				}
			},
			template: '<button v-on:click="count++"> you click me {{count}} times </button>',
		})

		//Vue根实例,挂载到id为app的标签上。
		new Vue({
			el: '#app',
		})





	</script>


</body>

</html>